<template>
  <a-layout-header
    style="padding: 0 0px; background: rgba(1, 1, 1, 0); height: auto"
    class="header"
  >
    <div class="logo" /> 
    <div class="bre-safety-size drop-down"> 
      <a-menu
     :selectedKeys="[$router.currentRoute.value.name]"
        v-model:openKeys="antMenu.openKeys"
        @click="handleClick"
        v-show="$store.state.nav.status == 0"
        ref="antmenu" 
        :style="{ lineHeight: '54px' }"
        mode="horizontal"
      >
        <!-- :defaultSelectedKeys='["1"]' -->
        <a-menu-item v-for="(item) in navList" :key="String(item.url)">
         
          <router-link :to="{ name: item.url }">{{ item.name }}</router-link>
      
        </a-menu-item>
      </a-menu>
      <a-menu 
        v-show="$store.state.nav.status == 1"
        mode="horizontal"
        :style="{ lineHeight: '54px' }"
      >
        <a-menu-item @click="NavBack" key="1"> 返回首页 </a-menu-item> 
      </a-menu>
    </div>
  </a-layout-header>
  <!-- <a-menu-item key="1" > 文章 </a-menu-item> -->
</template>

<script>
import { useRouter } from 'vue-router'
import { reactive } from "vue";    
import { useStore } from 'vuex';
export default {
  name: "Header",
  data() {
    return {
      navList: [
        { name: "首页", url: "index" },
        // {name:'前端',url:'frontend' ,childrenTab:[{name:'node'}]},
        // {name:'后端',url:'backend'},
        // {name:'音乐',url:'music'},
        // {name:'思考',url:''},
        // {name:'设计',url:''}, // {name:'生活',url:''},
        // {name:'算法',url:'algorithm'},
        {name:'实验室',url:'laboratory'},
        // {name:'摄影',url:'photograph'},
        
        { name: "友链", url: "friendlink" },
      ],
      // current:["index"],
      navStatus: 3, // 1默认 ，2 不存在的导航样式
     
    };
  },
  methods: {
    backIndex() {
      // this.$store.commit("HomeNav", { shape: 0 });
      
    },
    handleClick() {
      // this.$router.push('/'+e.item.$attrs.url)
      // ant-menu-item-selected
      // this.selectedKeys
    },
  },
  setup() { 
     const $router=useRouter()
      const $store = useStore() 
      const antMenu = reactive({ 
       openKeys: ["sub2"], //默认组
       navStatus:$store.state.nav.status,// 1默认 ，2 不存在的导航样式
    })


    function NavBack(){
      $store.state.nav.status=0
       $router.push({path:"/"})
    }
    return{ antMenu,NavBack }
  }
};
</script>

